<template>
  <div>
    <div v-show="qh == true">
      <p
        style="
          width: 96%;
          margin: 0 auto;
          line-height: 60px;
          font-size: 18px;
          font-weight: bold;
          border-bottom: 1px solid gray;
        "
      >
        我的购物车清单
      </p>
      <el-table :data="typelist" border style="width: 96%; margin: 10px auto 0">
        <el-table-column label="商品名称" width="180">
          <template #default="scope">
            <img
              :src="`${$Imgurl}/api/public/showImg/${scope.row.book.picture}`"
              style="width: 80px; height: 80px"
            />
          </template>
        </el-table-column>

        <el-table-column prop="book.name" label="商品名称" width="580">
        </el-table-column>

        <el-table-column prop="book.price" label="商品价钱" width="180">
        </el-table-column>

        <el-table-column label="商品数量" width="300">
          <!-- <template #default='scope'>
					  {{scope.row.num}}
				  </template> -->
          <template #default="scope">
            <el-input-number
              v-model="scope.row.cart.num"
              :min="1"
              :max="100"
              controls-position="right"
            />
          </template>
        </el-table-column>

        <el-table-column label="商品总价" width="250">
          <template #default="scope">
            {{ scope.row.book.price * scope.row.cart.num }}
          </template>
        </el-table-column>

        <el-table-column label="复选框" width="250">
          <template #default="scope">
            <el-checkbox
              size="large"
              border
              v-model="scope.row.show"
            ></el-checkbox>
          </template>
        </el-table-column>

        <el-table-column label="编号" width="50">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
      </el-table>

      <div style="border-top: 8px solid gray; width: 96%; margin: 0 auto">
        <div style="border-bottom: 1px solid black; height: 45px">
          <el-button> 总价钱: </el-button>
          {{ sum }}
        </div>
        <div>
          <el-button @click="qxd()"> 去下单 </el-button>
        </div>
      </div>
    </div>
    <!--  -->
    <div v-show="qh == false">
      <p
        style="
          width: 96%;
          margin: 15px auto 0;
          line-height: 60px;
          font-size: 18px;
          font-weight: bold;
          border-bottom: 1px solid gray;
        "
      ></p>
      <el-table :data="gwc" border style="width: 96%; margin: 10px auto 0">
        <el-table-column label="图片" width="180">
          <template #default="scope">
            <img
              :src="`${$Imgurl}/api/public/showImg/${scope.row.book.picture}`"
              style="width: 80px; height: 80px"
            />
          </template>
        </el-table-column>

        <el-table-column prop="book.name" label="商品名称" width="580">
        </el-table-column>

        <el-table-column prop="book.price" label="商品价钱" width="180">
        </el-table-column>

        <el-table-column prop="cart.num" label="商品数量" width="300">
        </el-table-column>

        <el-table-column label="商品总价" width="250">
          <template #default="scope">
            {{ scope.row.book.price * scope.row.cart.num }}
          </template>
        </el-table-column>
      </el-table>

      <div
        style="
          border-top: 8px solid gray;
          width: 96%;
          margin: 0 auto;
          border-bottom: 1px solid gray;
        "
      >
        <div style="border-bottom: 1px solid black; height: 45px">
          <el-button> 总价钱: </el-button>
          {{ sums }}
        </div>
        <div style="border-bottom: 1px solid black; padding-bottom: 10px">
          <div style="display: flex; margin-top: 10px">
            <el-button type="primary">请输入收货地址</el-button>
            <el-input placeholder="请输入地址" v-model="dz1" />
          </div>
          <div style="display: flex">
            <el-button type="primary">请输入收货电话</el-button>
            <el-input placeholder="请输入地址" v-model="dz2" />
          </div>
        </div>
        <div style="display: flex; line-height: 50px">
          <div style="width: 50%; text-align: center">
            <el-button type="warning" @click="cxxz()" v-if="an == true"
              >重新选择</el-button
            >
            <el-button type="success" v-if="an == false"
              >订单下单成功!,单号:{{ ddh }}</el-button
            >
          </div>
          <div style="width: 50%; text-align: center">
            <!-- <el-button type="danger" @click="xd()">下单</el-button> -->
            <el-button
              :plain="true"
              type="primary"
              @click="xd()"
              v-if="an == true"
              >下单</el-button
            >
            <el-button type="danger" v-if="an == false" @click="fukuan()">去付款</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 拦截器
import instance from "../../ajax/index.js";
//
import { ElMessage } from "element-plus";
//
export default {
  name: "Cart",
  data() {
    return {
      typelist: [],
      qh: true,
      gwc: [],
      dz1: "", //类型地址1
      dz2: "", //类型地址2
      typelists: [],
      ddh: "", //订单号
      an: true, //按钮
    };
  },
  created() {
    // 发起get请求，获取数据
    instance
      .get("/api/fore/cart/findAll")
      .then((res) => {
        // 判断状态
        // console.log(res.data.data);
        if (res.status === 200) {
          // 向表格渲染数据
          this.typelist = res.data.data;
          for (let i in this.typelist) {
            this.typelist[i].show = false;
          }
          console.log(res);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
	fukuan(){
		// console.log();
		this.$router.push({
			path:`/home/payment/${this.ddh}`
			// juery:{
			// 	ordid:this.ddh
			// }
		});
	},
    qxd() {
      for (let index in this.typelist) {
        if (this.typelist[index].show == true) {
          this.qh = false;
          // this.gwc.push(this.typelist[index]);
          this.gwc.push(this.typelist[index]);
          console.log(this.gwc);
        }
      }
    },
    cxxz() {
      for (let i in this.typelist) {
        this.typelist[i].show = false;
      }
      this.qh = true;
    },
    xd() {
      // 备份
      let that = this;
      let arr = [];
      // 判断不能为空
      console.log(that.gwc);
      // 发起post请求 请求地址 + 提交数据 + 表头配置
      /*
					请求地址：http://127.0.0.1:8093/api/fore/cart/addCart2Order
					提交的数据：this.$qs.stringify( data )
					配置：header对象
				*/
      // 将提交的数据打包
      for (let index in that.gwc) {
        let data = {
          bookid: that.gwc[index].cart.bookid,
          num: that.gwc[index].cart.num,
          price: that.gwc[index].book.price,
        };
        arr.push(data);
      }

      instance
        .post("/api/fore/cart/addCart2Order", JSON.stringify(arr), {
          // 告知服务器本次请求的方式以及编码格式
          headers: { "Content-Type": "application/json" },
        })
        .then((res) => {
          console.log(res);

          that.ordid = res.data.data.ordid;
          that.ddh = res.data.data.ordid;

          let obj = {
            addr: that.dz1,
            ordid: that.ordid,
            phone: that.dz2,
          };
          console.log(obj);
          instance
            .post("/api/fore/ord/addAddr", JSON.stringify(obj), {
              // 告知服务器本次请求的方式以及编码格式
              headers: { "Content-Type": "application/json" },
            })
            .then((res) => {
              console.log(res);

              ElMessage({
                message: "订单下单成功!,单号:" + this.ddh,
                type: "success",
              });
            })
            .catch((error) => {
              console.log(error);
            });
          console.log(arr);
        })
        .catch((error) => {
          console.log(error);
        });
      console.log(arr);
      that.an = false;
    },
  },
  computed: {
    sum() {
      let sum = 0;
      for (let index in this.typelist) {
        if (this.typelist[index].show == true) {
          sum +=
            this.typelist[index].book.price * this.typelist[index].cart.num;
        }
      }
      return sum;
    },
    sums() {
      let sums = 0;
      for (let index in this.gwc) {
        sums += this.gwc[index].book.price * this.gwc[index].cart.num;
      }
      return sums;
    },
  },
};
</script>

<style></style>
